<!-- 公共集合 -->
<style lang="scss">
    .message-itemview{
        padding: 10px 20px;
        padding-top: 0;
        background: #ffffff;
        .itemview-header{
            position: relative;
            font-size: 14px;
            color: #808080;
            height:50px;
            line-height: 50px;
            // padding:10px 0;
            .message-status{
                .item{
                    display: inline-block;
                    border-radius: 4px;
                    line-height: 30px;
                    height: 30px;
                    padding: 0 20px;
                    cursor: pointer;
                    &.active{
                        background: #386ad0;
                        color: #fff;
                    }
                }
            }

            .read-all{
                color:#2f6bcf;
                font-size: 14px;
                cursor: pointer;
                position: absolute;
                right:40px;
                top:0
            }

            .close{
                position: absolute;
                right:10px;
                top:0;
                font-size: 12px;
                color: #cccccc;
                cursor: pointer;
                &:hover{
                    color:#2f6bcf;
                }
            }
        }
        .itemview-body{
            border: 1px solid #e4e7ed;
            position: relative;
            .itemview-searchbar{
                padding: 5px 20px;
                background: #f4f7fd;
                color: #333333;
                .el-date-editor .el-range-separator {
                    width: auto;
                }
                .search{
                    color:#2f6bcf;
                    cursor: pointer;
                    margin-left: 10px;
                }
                .keyword-input{
                    width:150px;
                }
                .date-input{
                    width:250px;
                }
            }
            /* IE9 兼容性处理 */
            .itemview-searchbar-ie9 {
              .date-input {
                width: 240px;
              }
              .el-input__inner {
                line-height: normal;
              }
              .el-date-editor .el-range-input {
                width: 35%;
              }
            }
            .list-item:last-child:after{
                display: none;
            }
            .je-vue-listview{
                padding:0;
                .listview-body{
                    padding:10px 20px;
                }
                .je-vue-pagebar{
                    background: #f4f7fd;
                    height: 50px;
                    line-height: 50px;
                    padding: 0 20px;
                }
            }
        }
    }
</style>
<template>
  <div class="message-itemview">
    <!-- 标题 -->
    <div class="itemview-header">
      <div class="message-status">
        <div
          :class="{active:activeStatus==item.code}"
          @click="activeStatus=item.code;"
          v-for="item in status"
          :key="item"
          class="item"
        >
          {{ getEn(item.text) }}<span v-show="item.code=='WD'">({{ unreadCount }})</span>
          <!-- {{getEn(item.text)+title}} -->
        </div>
      </div>
      <span
        @click="readAll"
        v-show="activeStatus=='WD'"
        class="read-all"
      >{{ $t('_message.allread') }}</span>

      <i
        @click="close"
        class="jeicon jeicon-error close"
      />
    </div>
    <div class="itemview-body">
      <div class="itemview-searchbar">
        <div class="searchbox">
          <slot name="searchType" />
          {{ $t('_message.keyword') }}：<el-input
            v-model="_keyword"
            @keyup.enter.native="load"
            @clear="load"
            @input="inputChange($event)"
            class="keyword-input"
            size="mini"
            placeholder=""
            clearable
          />
          {{ $t('_message.date') }}：<el-date-picker
            v-model="time"
            :start-placeholder="$t('_message.begin')"
            :end-placeholder="$t('_message.end')"
            @change="load"
            class="date-input"
            size="mini"
            type="daterange"
            range-separator="至"
          />
          <span
            @click="load"
            class="search"
          >{{ $t('_message.search') }}</span>
        </div>
      </div>
      <!-- 列表 -->
      <je-listview
        ref="list"
        v-loading="loading"
        :total-count="totalCount"
        :page-size="10"
        :empty-height="emptyHeight"
        :item-height="itemHeight"
        @buildData="_buildData"
      >
        <!-- 数据项 -->
        <slot
          slot="listitem"
          @setUnreadCount="_buildData"
          name="listitem"
        />
      </je-listview>
    </div>
  </div>
</template>
<script>
import VueI18n from 'vue-i18n';
import ListView from '../../../../components/listview/listview.vue';
import spe from '../../assets/lang/message/speNationalList';
import getLang from '../../assets/lang/mergeLang';

const i18n = new VueI18n({
  locale: JE.getCookies('je-local-lang') || 'zh_CN', // 语言标识
  messages: {
    zh_CN: getLang('zh', [{ name: '_message', data: require('./../../assets/lang/message/zh') }, { name: '_bubble', data: require('./../../assets/lang/bubble/zh') }]), // 中文语言包
    en: getLang('en', [{ name: '_message', data: require('./../../assets/lang/message/en') }, { name: '_bubble', data: require('./../../assets/lang/bubble/en') }]), // 英文语言包
  },
});
export default {
  name: 'ItemView',
  components: { 'je-listview': ListView },
  props: {
    title: String,
    totalCount: Number,
    loading: Boolean,
    visible: Boolean,
    unreadCount: Number,
  },
  i18n,
  data() {
    return {
      status: [
        { text: '未读', code: 'WD' },
        { text: '已读', code: 'YD' },
        { text: '全部', code: 'ALL' },
      ],
      activeStatus: 'WD',
      unreadCount: 0,
      time: [], // 时间区间查询
      keyword: '', // 关键字查询
      _keyword: '', // 关键字查询
      visible: this.visible,
      title: this.title, // 新闻类型
      totalCount: this.totalCount, // 总条数，绑定分页条
      loading: this.loading,
      emptyHeight: 180, // 空数据的容器高
      itemHeight: 70, // 数据项高
    };
  },
  computed: {
    startTime() {
      return this.time && this.time[0] ? `${Ext.Date.format(this.time[0], 'Y-m-d')} 00:00:00` : '';
    },
    endTime() {
      return this.time && this.time[1] ? `${Ext.Date.format(this.time[1], 'Y-m-d')} 23:59:59` : '';
    },
  },
  watch: {
    activeStatus(nv) {
      this.load();
    },
  },
  mounted() {
    // 增加IE9浏览器类名 处理IE9兼容性样式
    if (Ext.isIE9m) {
      this.$nextTick(() => {
        const doms = document.getElementsByClassName('itemview-searchbar');
        for (let i = 0; i < doms.length; i++) {
          const dom = doms[i];
          if (dom.className.indexOf('itemview-searchbar-ie9') < 0) {
            dom.classList.add('itemview-searchbar-ie9');
          }
        }
      });
    }
  },
  methods: {
    inputChange(e) {
      this.$forceUpdate();
    },
    close(visible) {
      const parent = this.$parent;
      parent.setVisible(false);
      parent.$emit('doact', 'clearSelect');
    },
    /**
             * 获得分页信息
             */
    getList() {
      return this.$refs.list;
    },
    /**
             * 查询参数
             */
    getParams() {
      const pageInfo = this.getList().getPageInfo();
      return {
        startTime: this.startTime,
        endTime: this.endTime,
        keyword: this.keyword,
        start: pageInfo.start,
        limit: pageInfo.limit,
        readStatus: this.activeStatus,
      };
    },
    load() {
      this.keyword = this._keyword;
      this.getList().load();
    },
    /**
             * 加载数据
             */
    _buildData() {
      const me = this;
      this.$emit('buildData', (data) => {
        me.unreadCount = data.noReadCount;
      });
    },
    readAll() {
      this.$emit('readAll');
    },
    getEn(cn) {
      if (!cn) return;
      if (this.$i18n.locale == 'zh_CN') return cn;
      return spe[cn] || cn;
    },
  },
};
</script>
